<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../QQ/node_modules/layui/dist/css/layui.css" />
    <style>
      #box {
        width: 800px;
        border: 1px solid #000;
        margin: 50px auto;
      }
      #album {
        width: 800px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div>
        <button type="button" class="layui-btn" lay-on="test-page-upload">
          上传照片
        </button>
        <button type="button" class="layui-btn" lay-on="test-page-establish">
          创建相册
        </button>
      </div>
      <div id="album"></div>
    </div>
  </body>
  <script src="../QQ/node_modules/jquery/dist/jquery.js"></script>
  <script src="../QQ/node_modules/layui/dist/layui.js"></script>
  <script>
    // 获取相册数据
    var Rendering = function () {
      $.ajax({
        url: "http://localhost:3000/api/book",
        type: "get",
        dataType: "json",
        success: function (data) {
          var str = "";
          data.data.albumList.forEach((item) => {
            str += ` <div style="margin-right:20px; text-align: center;">
              <img src="${item.img}" alt="" style="width:100px;height:100px;" />
              <p>${item.name}</p>
                <span style="display: none">${item.id}</span>
          </div>`;
          });
          $("#album").html(str);
        },
      });
    };
    // 渲染相册
    Rendering();

    layui.use(function () {
      var $ = layui.$;
      var layer = layui.layer;
      var util = layui.util;
      var form = layui.form;
      var dropdown = layui.dropdown;
      var upload = layui.upload;
      // 事件
      util.on("lay-on", {
        "test-page-upload": function () {
          layer.open({
            type: 1,
            area: ["900px", "600px"],
            resize: false,
            shadeClose: true,
            title: "上传照片-普通上传（H5）",
            content: `
            <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
              <button class="layui-btn demo-dropdown-base">
      <span>选择相册</span>
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <form id="fileUploadForm" enctype="multipart/form-data"  style="margin:0px 100px 0px 350px;">
      <input type="file" name="photo" multiple>
      <button type="submit">上传</button>
    </form>
          `,
            success: function () {
              // 初始化下拉菜单
              $.ajax({
                url: "http://localhost:3000/api/book",
                type: "get",
                dataType: "json",
                success: function (data) {
                  dropdown.render({
                    elem: ".demo-dropdown-base", // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                    data: data.data.albumList.map((item) => {
                      return {
                        title: item.name,
                        id: item.id,
                      };
                    }),
                    click: function (obj) {
                      this.elem.find("span").text(obj.title);
                      //   获取相册id
                      Id = obj.id;
                    },
                  });
                },
              });
              // 对弹层中的表单进行初始化渲染
              form.render();
              // 表单提交事件
              // 此处可执行 Ajax 等操作
              $("#fileUploadForm").submit(function () {
                var formData = new FormData($(this)[0]);
                formData.append("albumId", Id);
                $.ajax({
                  url: "http://localhost:3000/api/books", // 后端处理上传的URL
                  type: "POST",
                  data: formData,
                  exts: true,
                  async: true,
                  cache: false,
                  contentType: false,
                  processData: false,
                  success: function (response) {
                    console.log("上传成功", response);
                    // 可根据上传成功的回调来更新界面或提示用户
                    layer.closeAll();
                  },
                  error: function (error) {
                    console.error("上传失败", error);
                    // 处理上传失败的情况，如提示用户或记录错误
                  },
                });
                return false;
              });
            },
          });
        },
        "test-page-establish": function () {
          layer.open({
            type: 1,
            area: ["900px", "600px"],
            resize: false,
            shadeClose: true,
            title: "创建相册",
            content: `
            <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                 <div class="layui-form-item" style="margin: 0 100px 0 300px;">
              <div class="layui-inline">
                  <label class="layui-form-label">相册名称</label>
                  <div class="layui-input-block ">
                      <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                  </div>
              </div>
          </div>
                 <div class="layui-form-item" style="margin: 0 100px 0 300px;">
              <div class="layui-inline">
                  <label class="layui-form-label">相册封面</label>
                  <div class="layui-input-inline layui-input-wrap">
                      <input type="text" name="img" lay-filter="img" placeholder="请输入图片地址" lay-verify="required|imgs" class="layui-input">
                  </div>
              </div>
          </div>
                <div class="layui-form-item" style="margin: 380px  100px 0 350px;">
                  <button class="layui-btn " lay-submit lay-filter="demo-login">确定创建</button>
                </div>

            </div>
          `,
            success: function () {
              // 对弹层中的表单进行初始化渲染
              form.render();
              // 表单提交事件
              form.on("submit(demo-login)", function (data) {
                var field = data.field; // 获取表单字段值
                // 此处可执行 Ajax 等操作
                console.log(field);
                $.ajax({
                  url: "http://localhost:3000/api/book", //服务器端点URL
                  type: "post",
                  data: field,
                  dataType: "json",
                  success: function (item) {
                    console.log(item);
                    layer.closeAll();
                    Rendering();
                  },
                  error: function (err) {
                    console.log(err.responseJSON);
                  },
                });
                return false; // 阻止默认 form 跳转
              });
            },
          });
        },
      });
      // 相册展开
      $("#album").on("click", "div", function () {
        var ID = $(this).children().eq(2).html();
        $.ajax({
          type: "get",
          url: `http://localhost:3000/api/books?id=${ID}`,
          dataType: "JSON",
          success: function (res) {
            var str = "";
            res.data.forEach((item, index) => {
              str += `<div style="margin-right:20px; text-align: center;display: inline-block">
              <img src="${res.data[index]}" alt="" style="width:100px;height:100px; " />
          </div>`;
            });
            layer.open({
              type: 1,
              area: ["100%", "100%"],
              move: false,
              resize: false,
              shadeClose: true,
              shade: 0.5,
              title: "相册内容",
              skin: "layui-layer-molv",
              content: str,
            });
          },
          error: function (err) {
            console.log(err.status);
          },
        });
      });
    });
  </script>
</html>
